<template>
        <div class="main">
            <ul class="listTitle">
                <li v-for='item in this.$store.state.leaveStorage.stockTitleList'>{{item.label}}</li>
            </ul>
            <ul class="dataList" v-for='(item,index) in dataList'>
                <li>{{index + 1}}</li>
                <li>{{item.sendCompany}}</li>
                <li>{{item.leaveWarehouseType | formWarehouseType}}</li>
                <li>{{item.leaveWarehouseNumber}}</li>
                <li>{{item.leaveWarehouseManager}}</li>
                <li>{{item.leaveWarehouseDate | formatDate}}</li>
                <li>{{item.filePath | formFileAddress}}</li>
                <li>{{item.corpOrderID | formOrderID}}</li>
                <li>
                    <span class="operationRecord" @click='showOutRecord(index)'>查看详情</span>
                </li>
            </ul>
            <p class="nullContent" v-show='nullContent'>暂无数据</p>
            <div class="block" v-show='isPagination'>
                <el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
            </div>
        </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        name: 'user',
        data() {
            return {
                dataList: [],
                currentPage: 1,
                total: 0,
                pageSize: 10,
                isPagination:true,
                nullContent: false
            }
        },
        filters: {
            // 格式化日期
            formatDate(date) {
                if (date == null || date == '' || date == undefined) {
                    return '-';
                } else {
                    let y, m, d, h, i, s,
                        t = new Date(parseInt(date));
                    y = t.getFullYear()
                    m = t.getMonth() + 1
                    d = t.getDate()
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
                }
            },
            // 文件地址
            formFileAddress(data) {
                 if (data == null || data == '' || data == undefined) {
                    return '-';
                } else {
                    let array = data.split('/');
                    return array[array.length - 1];
                }
            },
            // 出库单号
            formOrderID(data) {
                if (data == null || data == '' || data == undefined) {
                    return '-';
                } else {
                    return data;
                }
            },
            // 出库类型
            formWarehouseType(data) {
                switch (Number(data)) {
                    case 1:
                        return '销售出库'
                        break;
                    case 2:
                        return '销毁出库'
                        break;
                    case 3:
                        return '零售出库'
                        break;
                }
            }
        },
        created: function() {
            this.getStockList(1, 10);
            this.$root.eventHub.$on('outStockListSearch', (o) => {
                this.getStockList(1, 10, o);
            })
        },
        methods: {
            // 每页显示多少条
            handleSizeChange(val) {
                this.pageSize = val;
                this.getStockList(1, val);
            },
            // 分页跳转
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getStockList(val, this.pageSize);
            },
            // 获取出库列表
            getStockList(i, o, l) {
                this.$store.commit('showLoading');
                let a = {
                        pageNo: i,
                        pageSize: o,
                    },
                    list = Object.assign(a, l);
                this.getOutStockList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data)
                    if (data.code == 200) {
                        this.dataList = data.data.list;
                        this.total = data.data.count;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.isPagination = false;
                        }else{
                            this.isPagination = true;
                            this.nullContent = false;
                        }
                    } else {
                        this.$message(data.message);
                        this.isPagination = false;
                    }
                }).catch(msg => console.log(msg));
            },
            // 显示记录组件
            showOutRecord(i) {
                let leaveWarehouseId = this.dataList[i].id;
                this.$store.commit('toOutStockRecord', {
                    leaveWarehouseId: leaveWarehouseId
                });
            },
            ...mapActions(['getOutStockList'])
        },
        beforeDestroy: function() {
            this.$root.eventHub.$off('outStockListSearch');
        }
    }

</script>
<style scoped>
    .main {
        width: 100%;
        background-color: #fff;
        margin: 10px 0 0;
    }
    
    .listTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #999999;
        font-size: 14px;
        text-align: center;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        box-sizing: border-box;
    }
    
    .dataList {
        width: 100%;
        height: 56px;
        line-height: 56px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }
    
    .dataList {
        border-bottom: 1px solid #dddddd;
    }
    
    .dataList li,
    .listTitle li {
        border-right: 1px solid #dddddd;
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 0 5px;
    }
    
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 8%;
    }
    
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 16%;
    }
    
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 8%;
    }
    
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 11%;
    }
    
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 8%;
    }
    
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 10%;
    }
    
    .listTitle li:nth-child(7),
    .dataList li:nth-child(7) {
        width: 15%;
    }
    
    .listTitle li:nth-child(8),
    .dataList li:nth-child(8) {
        width: 11%;
    }
    
    .listTitle li:nth-child(9),
    .dataList li:nth-child(9) {
        width: 13%;
        border: none;
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
    
    li {
        float: left;
    }
    
    .clear {
        clear: both;
    }
    
    .block {
        padding: 30px 24px;
        text-align: center;
    }
    
    .dataList li span {
        cursor: pointer;
    }
    
    .operationOut {
        display: inline-block;
        color: #43DCE7;
        padding: 0 20px;
    }
    
    .operationRecord {
        display: inline-block;
        color: #35C885;
        padding: 0 20px;
    }

</style>
